<style lang="scss" scoped>
.doctor {
  dl {
    display: flex;
    padding: 10px;

    dt {
      width: 50px;
      height: 100px;
      img {
        width: 50px;
        height: 50px;
      }
      margin: 0 10px;
    }
    dd {
      .name {
        font-size: 20px;
        font-weight: 800;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
.YY {
  width: 100%;
  line-height: 50px;
  div {
    width: 100%;
    height: 50px;
    font-size: 20px;
  }
}

.box {
  width: 100vw;
  height: 100%;
  display: flex;
  .left {
    flex: 8;
    height: 100%;
    overflow: auto;
    div {
      width: 100%;
    }
  }
  .right {
    height: 100%;
    overflow: auto;
    flex: 7;
    div {
      display: flex;
      padding-left: 20px;
      width: 100%;
      height: 46px;
      align-items: center;
    }
  }
}
.activeIndex {
  background: #ccc;
}
.tab1 {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  font-size: 14px;
}
.box1 {
  width: 100vw;
  height: 100vh;
  display: flex;
  color: #000;
  font-size: 14px;

  .left1 {
    width: 200px;
    background-color: rgb(247, 248, 250);
    height: 100vh;
    overflow-y: scroll;

    li {
      line-height: 50px;
      padding: 0 10px;
    }

    .active {
      border-left: 3px solid rgb(30, 111, 255);
      background-color: #fff;
      color: #000;
    }
  }

  .right1 {
    flex: 1;
    height: 100vh;
    overflow-y: scroll;

    li {
      line-height: 50px;
      padding: 0 10px;
    }

    .active1 {
      color: rgb(30, 111, 255);
    }
  }
}

</style>
<template>
  <van-dropdown-menu ref="menuRef">
     <!-- 按科室 -->
    <van-dropdown-item :title="TextKS" v-model="value" ref="itemRefKS">
      <div class="tab1">
        <div class="box1">
          <div class="left1">
            <li
              v-for="(v, i) in KeshiTap"
              :key="i"
              @click="headeTap(v, i)"
              :class="cunter === i ? 'active' : ''"
            >
              {{ v }}
            </li>
          </div>
          <div class="right1">
            <li
              v-for="(v, i) in KeShi"
              :key="i"
              @click="headeTap1(v, i)"
              :class="cunter1 === i ? 'active1' : ''"
            >
              {{ v }}
            </li>
          </div>
        </div>
      </div>
    </van-dropdown-item>

   <van-dropdown-item :title="text" v-model="value" ref="itemRef">
      <div class="box">
      <!-- 左侧城市 -->
      <div class="left">
        <van-sidebar v-model="active">
          <van-sidebar-item
            v-for="(item, index) in areaList.province_list"
            :key="index"
            :title="item"
            @click="getCity(index)"
          >
          </van-sidebar-item>
        </van-sidebar>
      </div>
      <!-- 右侧市区 -->
      <div class="right">
        <div
          v-for="(v, i) in arr1"
          :key="i"
          :class="{ activeIndex: currentIndexcity == i }"
        >
          <div @click="handCity(v, i)">{{ v }}</div>
        </div>
      </div>
    </div>
    </van-dropdown-item>

    <van-dropdown-item title="默认排序">
      <div style="" class="YY">
        <div>默认排序</div>
        <div>按接诊人次从多到少</div>
        <div>好评从高到低</div>
        <div>响应时间</div>
      </div>
    </van-dropdown-item>
  </van-dropdown-menu>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    ><div v-for="(v, i) in SearchDoctorData" :key="i" :v="v" class="doctor">
      <dl>
        <dt>
          <img :src="v.doctorimage" alt="" style="width: 50px; height: 50px" />
        </dt>
        <dd>
          <div class="name">
            <div>{{ v.doctorname }}</div>
            <span style="font-size: 15px">{{ v.doctorstate }}</span>
            <span> <van-tag type="success">三甲</van-tag></span>
          </div>

          <div style="font-size: 14px">
            <span>{{ v.doctoradministre }}</span>
          </div>
          <div style="padding: 5px">
            <van-tag type="primary">图文咨询</van-tag>
            <van-tag type="success">电话咨询</van-tag>
          </div>
          <van-text-ellipsis
            :content="v.doctordescword"
            rows="2"
            expand-text="展开"
            collapse-text="收起"
          />
          <div style="padding: 10px">
            好评率<span style="color: red">{{ v.doctorgood }}%</span>|锦旗
            <span style="color: red">{{ v.doctortime }}</span
            >|浏览人次
            <span style="color: red">{{ v.doctoradmin }}</span>
          </div>
          <div style="display: flex">
            <span style="color: red">￥</span>
            <h2>{{ v.doctorprice }}</h2>
            起
            <van-button
              type="primary"
              @click="Doctordetail(v)"
              style="width: 80px; height: 35px; position: absolute; right: 10px"
              >问医生</van-button
            >
          </div>
        </dd>
      </dl>
    </div></van-list
  >
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios'
import { areaList } from '@vant/area-data'
import type { bookStata, doctorState, socoState } from '@/interface'
import { useRoute, useRouter } from 'vue-router'
const value = ref(0)
const router = useRouter()
const active = ref(0)
const loading = ref(true)
const finished = ref(true)

const SearchBookData = ref<bookStata[]>([])
const SearchDoctorData = ref<doctorState[]>([])
const SearchSocoData = ref<socoState[]>([])
const handSearch = () => {
  isSearch.value = true
}
const isSearch = ref(false)
const searchValue = ref('')
const route = useRoute()
const activeId = ref(1)
const activeIndex = ref(0)

onMounted(() => {
  route.query.searchValue
  console.log(route.query.searchValue)
  axios
    .get('/api/search', {
      params: {
        pageCode: 1,
        pageSize: 10,
        searchValue: route.query.searchValue,
      },
    })
    .then(res => {
      const { data } = res.data
      console.log(data)

      SearchBookData.value = data.book
      SearchDoctorData.value = data.doctor
      SearchSocoData.value = data.soco
    })
})
const Doctordetail = (v: doctorState) => {
  router.push('/doctordetail?id=' + v.doctorid)
}


// 城市
const showcity = ref(false)
const showPopupcity = () => {
  showcity.value = true
}
const paramsData = reactive({
  pageCode: 1,
  pageSize: 10,
  lv: '',
  city: '',
  state: '',
  admin: '',
  search: '',
})

const currentIndexcity = ref(0)
const city = ref('北京')
const arr1 = ref<string[]>(['北京市'])

const getCity = (v: string) => {
  arr1.value = []

  for (let key in areaList.city_list) {
    if (v.slice(0, 2) == key.slice(0, 2)) {
      arr1.value.push(areaList.city_list[key])
      console.log(v)
    }
  }
}
const currentIndex = ref(0)
const itemRef=ref()

const doctorState = ref([])
const text = ref('全国')
const listTap = ref(['全部', '公立', '私立'])
const handCity = (v: string, i: number) => {
  currentIndex.value = i
  showcity.value = false
  city.value = v
  paramsData.city = v
  text.value = v
  itemRef.value.toggle()
}


// 科室
const TextKS=ref('按科室')
const KeshiTap = ref([])
const KeShi = ref([])
const TextTap = ref('')
const cunter = ref(0)
const cunter1 = ref(-1)
const showKe = ref(true)
const onSelect = (item: string) => {
  show.value = false
}

axios.get('/api/office/list').then(res => {
  res.data.data.forEach(
    (item: { adminname: string; adminchildrenname: string }) => {
      KeshiTap.value.push(item.adminname as never)
      KeshiTap.value = [...new Set(KeshiTap.value)].reverse()
      if (item.adminname === '全部') {
        KeShi.value.push(item.adminchildrenname as never)
      }
    },
  )
})
const headeTap = (v: string, index: number) => {
  TextTap.value = v
  cunter.value = index
  axios.get('/api/office/list',{params:paramsData}).then(res => {
    KeShi.value = []
    res.data.data.forEach(
      (item: { adminname: string; adminchildrenname: string }) => {
        if (item.adminname === v) {
          KeShi.value.push(item.adminchildrenname as never)
        }
      },
    )
  })
}
const show = ref(false)

const tapslist = ref('')
const itemRefKS = ref()
const headeTap1 = (v: string, index: number) => {
  tapslist.value = v
  cunter1.value = index
  show.value = false
  showKe.value = false
  TextKS.value = v
  paramsData.admin = v
  itemRefKS.value.toggle()
}
</script>
